Ayala Steinfeld
Prototype · 360° deer

Hi There!

I’MAYALA.

Sr. product designer

With 5+ years of experience, I simplify complex B2B SaaS, BI, and hardware products by leading design direction, driving UX decisions, and delivering pixel-perfect execution.

›View projects ›Contact me
Booting up
Hey!
z z z
Try: Move the cursor around him Come close Flick fast near his head Hover on him (petting) Click him — 360° spin Move far left or right — he turns Stay still
מחזור הליכה · 8 פריימים מג׳מיני הזיזי את העכבר לאורך הרצועה — האייל הולך אחרייך

מה בנוי למעלה

האייל חי — מתמונה אחת

בלי מודל תלת־ממדי ובלי ספרייה: אותה תמונה שקיימת באתר נפרשת על רשת של 14,000 נקודות ב-WebGL ומתכופפת כמשטח אחד רציף — כמו Puppet Warp — עם פיזיקת קפיצים לכל מפרק. אפשר להדליק את Show rig בפאנל ה-Tweaks כדי לראות את החיתוכים והצירים.

01

כיפוף, לא חיתוך

לכל נקודה ברשת יש משקל: כמה היא שייכת לראש, לאוזן או לזנב. המעברים רכים, ולכן התמונה נמתחת בצוואר ובבסיס האוזן ולא נקרעת. הראש מסתובב מבסיס הצוואר, האוזניים מתעוותות ונזקפות, הזנב מכשכש.

02

עיניים שזזות באמת

העיניים המקוריות מוסתרות ומצוירות מחדש, כך שהן עוקבות אחרי הסמן, ממצמצות, מצטמצמות מהנאה ונעצמות מעייפות.

03

הסמן הוא מקור אור

ברק נע על המשטח המבריק לפי מיקום העכבר, והצל על הרצפה זז לצד השני. ההטיה הקלה בתלת־ממד נותנת עומק.

04

אופי, לא אנימציה

מכונת מצבים: עוקב, סקרן, נבהל, מלוטף, מנופף, מסתובב אלייך, מתעייף ונרדם. זיהוי ריחוף לפי שקיפות הפיקסלים, לא לפי מלבן.

05

סיבוב 360° מגיליון הזוויות

חמש זוויות מהגיליון שלך (חזית, ¾, צד, ¾ אחורי, גב) עם רקע שהוסר, מיושרות לאותו גובה וקו פרסות. האייל מסתובב צעד אחר צעד אל הסמן, מציץ לאחור כשמשתהים, ובלחיצה מסתובב סיבוב שלם.

מפת דרכים

מאתר טוב לאתר השראה

שלושה שלבים, לפי סדר. אתרי השראה לא מנצחים בגלל אפקטים — הם מנצחים כי הבסיס מהיר ונקי, והרגע המפתיע יושב על סיפור ברור.

שלב 1

יסודות · שבוע

TECH

ביצועים: 14MB בקובץ אחד

כל התמונות וארבעת ה-case studies מוטמעים כ-base64 בתוך ה-HTML — ולכן יש מסך טעינה. לפצל לקבצי AVIF/WebP, לטעון case study רק כשפותחים אותו, ו-preload רק לאייל. יעד: הדף עולה בפחות משנייה וחצי, ומסך ה-0% נעלם.

UX

מטאפורה אחת, לא שתיים

היום Home יושב על קנבס עם זום וגרירה, וכל השאר נפתח בחלונות בסגנון macOS. לבחור אחת: קנבס של כלי עיצוב שבו כל סקשן הוא frame והמצלמה טסה אליו. זה גם הסיפור שלך כמעצבת.

UX · TECH

Case studies כטקסט אמיתי

כרגע הם עמודים מוקטנים בתוך iframe: לא נגישים, גוגל לא סורק אותם, אי אפשר לסמן טקסט, ובמובייל הם לא מסתדרים. לבנות ב-HTML עם תקציר למעלה (בעיה · תפקיד · תוצאה), ניווט פרקים דביק ופס התקדמות.

CONTENT

המספרים בחזית

91% אימוץ, 50% פחות קריאות FSE, הכשרה שירדה מ-6 חודשים ל-2–3 — כל אלה קבורים בסוף ה-case. להעלות מספר אחד חזק לכל כרטיס פרויקט. מגייסים סורקים, לא קוראים.

UI

ניקיון טיפוגרפי ו-CSS

Figtree נטען ולא בשימוש, Unbounded מוזכר ולא נטען, והקוד מצטבר בשכבות של תיקונים עם !important. משפחה אחת או שתיים, סקאלת גדלים אחת, וקובץ סגנונות אחד בלי סבבים.

שלב 2

חוויה · 2–3 שבועות

MOTION · UX

האייל כמדריך, לא כקישוט

בביקור ראשון הוא מסתכל על ה-dock ומראה לאן ללחוץ. כשפותחים סקשן הוא מגיב: יושב ליד העבודות, מנופף ב-Contact, נרדם כשאף אחד לא זז. הריג למעלה הוא הבסיס.

UX · CONTENT

Dev / PM / QA עם משהו להגיד

הסמנים כרגע רק מסתובבים. ריחוף על סמן יפתח תגובה עם תובנה אמיתית מפרויקט — QA: "בדקנו רשימה של 500 ג'ובים". והם יגיבו לאייל, כמו צוות אמיתי בפיגמה.

UX

⌘K — פלטת פקודות

"פתח AI Assistant", "העתק מייל", "הורד קורות חיים". מתאים למטאפורה של כלי עיצוב, ונותן למגייסים קיצור דרך לכל דבר.

MOTION

מעברים מתמשכים

עם View Transitions API התמונה בכרטיס הפרויקט גדלה והופכת לכותרת של ה-case study, במקום חלון שקופץ. העין לא מאבדת את ההקשר.

UX · MOBILE

מובייל שעוצב, לא שהתנצל

במקום "best on desktop": סיפור אנכי בגלילה, והאייל מגיב להטיית הטלפון (DeviceOrientation) במקום לעכבר. חצי מהמגייסים יפתחו את הלינק מ-LinkedIn בטלפון.

A11Y

נגישות שמראה מקצועיות

החלונות צריכים focus trap והחזרת פוקוס, תמונות ה-case צריכות alt, וכל ניווט צריך לעבוד גם במקלדת. מעצבת בכירה נבחנת גם על זה. את reduced-motion כבר כיבדת — מצוין.

שלב 3

רמת אתר השראה

TECH · MOTION

אייל תלת־ממדי עם שלד

ריג מתמונה אחת מגיע לתקרה של 2D. הרמה הבאה: מודל GLB עם עצמות (Blender או כלי image-to-3D) ב-three.js — הראש מסתובב באמת, הוא הולך בין סקשנים, והסמן מאיר אותו. חלופה קלה יותר: Rive עם state machine.

LOGIC · MEMORY

אייל שזוכר אותך

זה הרעיון המרכזי של fuch.ai — "פורטפוליו שפוגשים, לא קוראים". האייל זוכר ביקורים, אילו פרויקטים פתחת ואיפה עצרת, ומקבל אותך בהתאם: "חזרת! נשאר לך Insight Landa". כבר מחובר בפרוטוטייפ — רענני את הדף.

UI

מצב לילה שהאייל מאיר

כפתור מחשיך את הקנבס, והלדים על הקרניים והעיניים הופכים למקור האור של הדף — אור רך שנופל על הכרטיסים שלידו. רגע שאנשים מצלמים ומשתפים.

DELIGHT

רגעים נסתרים

לחיצה כפולה על הקרניים מדליקה אותן בצבעים, הקלדת "hire" גורמת לו לקפוץ, ואם לא זזים הרבה זמן הוא נרדם. לא יותר משלושה — כדי שזה יישאר מפתיע.

LOGIC

למדוד ולשפר

אנליטיקס קל (Plausible או PostHog): אילו case studies נפתחים, כמה זמן קוראים, איפה עוזבים. ואז לשפר לפי נתונים — כמו שאת עושה במוצרים. זה גם סיפור טוב לראיון.